<template>
    <div class="addHouse">
        <div class="top">
            <!--下拉切换-->
            <div class="main" style="justify-content: space-between;flex-direction: inherit;">
                <div>{{ isEdit ? $t("text.Employee.l100") : $t("text.Employee.l17") }}</div>
                <el-button type="primary" @click="handleClick" style="width: 85px;height: 30px;" :loading="loading">{{
                    $t("text.House.l144") }}</el-button>
            </div>
        </div>
        <div class="main">
            <!--表单结构渲染-->
            <div v-if="isload">
                <div style="width: 100%;display: flex;align-items: center;">
                    <CommonUploadHead :hit="$t('text.Employee.l20')" :limit="1" style="padding-right: 20px;"
                        @returnData="setImgValue1" @delUrl="clearData({ 'avatar': '' })" :fileList="headFileList">
                    </CommonUploadHead>
                    <div class=" df">

                        <div style="padding-right: 15px;">
                            <div class="title">{{ $t("text.PageData.l176") }}</div>
                            <CommonInputKey insertKey="name" @returnData="setData" :isNumber="0" disabled :hit="params.no">
                            </CommonInputKey>
                        </div>

                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t("text.PageData.l177") }}</div>
                            <CommonInputKey isMust :mustHit="$t('text.PageData.l178')" insertKey="realName"
                                @returnData="setData" :isNumber="0" :default="params.realName" :ref="'child1'">
                            </CommonInputKey>
                        </div>

                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t("text.PageData.l179") }}</div>
                            <CommonInputKey isMust :mustHit="$t('text.PageData.l180')" insertKey="mobile"
                                @returnData="setData" :isNumber="1" :is-format="false" :default="params.mobile" :ref="'child2'">
                            </CommonInputKey>
                        </div>

                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t('text.Employee.l29') }}</div>
                            <CommonSelect :dataList="jobSelect" @returnData="setDataIds1" isMust
                                :mustHit="$t('text.PageData.l181')" keys="name" isDefaultHit
                                :default="isEdit ? params.job == null || params.job == '' ? item.default : params.job : $t('text.PageData.l181')"
                                :isSelect="params.job == null ? false : isEdit" :ref="'child3'">
                            </CommonSelect>
                        </div>

                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l182') }}</div>
                            <CommonSelect :dataList="orgSelectCopy" @returnData="setDataIds2" :clear="isOrgClear" isMust
                                :mustHit="$t('text.PageData.l183')" keys="orgName" :ref="'child4'" isDefaultHit
                                :default="isEdit ? params.org == null || params.org == '' ? item.default : params.org : $t('text.PageData.l183')"
                                :isSelect="params.job == null ? false : isEdit">
                            </CommonSelect>
                        </div>

                        <div style="padding-right: 15px;">
                            <div class="title">{{ $t('text.PageData.l184') }}</div>
                            <div style="font-size: 12px;height: 22px;border: 1px solid #e1e1e1;border-radius: 2px;width: 156px;
                                display: flex;align-items: center;justify-content: center;">
                                <RadioSelect v-if="isload && isShowOrgTree" :selectList="orgTreeList" isShowTitle
                                    :fastSearch="$t('text.PageData.l185')" @returnData="setDataIds3" isRange2
                                    searchKey="functionalScope">
                                </RadioSelect>
                                <div v-if="!isShowOrgTree" style="color: orange;">{{ isEdit
                                    ? params.functionalScope != null ? getOrgName(params.functionalScope) :
                                        $t('text.PageData.l186') : $t('text.PageData.l186') }}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <div v-for="(s, index1) in addHousePage" v-bind:key="s.headTitle" style="width: 100%;">
                    <div class="headTitle">{{ s.headTitle }}</div>
                    <div class="df">
                        <div v-for="(item, index2) in s.data" v-bind:key="item.title"
                            :style="item.type == 'radio' || item.type == 'br' ? { paddingRight: '15px', width: '100%' } : { paddingRight: '15px' }">

                            <div class="title" v-if="item.type != 'br'"><span class="must" v-if="item.isMust">※</span>{{
                                item.title }}</div>
                            <CommonInputTime v-if="item.type == 'time'" :leftText="item.defaultUnit" :isMust="item.isMust"
                                :mustHit="item.mustHit" :insertKey="item.insertKey" @returnData="setData"
                                :ref="'child' + index1 + index2" :isDefaultValue="item.insertKey == 'birthTime'"
                                :hit="item.default"
                                :default="isEdit ? params[item.insertKey] == null || params[item.insertKey] == '' ? item.default : params[item.insertKey] : ''">
                            </CommonInputTime>

                            <CommonInputKey v-if="item.type == 'input'" :leftText="item.defaultUnit" :isMust="item.isMust"
                                :mustHit="item.mustHit" :insertKey="item.insertKey" @returnData="setData"
                                :isNumber="item.isNumber" :default="params[item.insertKey]" :is-format="item.format">
                            </CommonInputKey>

                            <CommonSelectKey v-if="item.type == 'select'" :dataList="dropData[item.dictionaryKey]"
                                :default="isEdit ? params[item.insertKey] == null || params[item.insertKey] == '' ? item.default : getSelectDefault(item.insertKey,item.dictionaryKey) : item.default"
                                :isSelect="params[item.insertKey] == null ? false : isEdit" :isMust="item.isMust"
                                :mustHit="item.mustHit" :insertKey="item.insertKey" @returnData="setData">
                            </CommonSelectKey>

                        </div>
                    </div>
                </div>

                <div style="width: 100%;">
                    <div class="df">
                        <div style="padding-right: 15px;display: flex;padding-top: 20px;">

                            <CommonUploadImg :hit="$t('text.Employee.l18')" :limit="1" style="padding-right: 20px;"
                                @returnData="setImgValue2" @delUrl="clearData({ 'idCardFront': '' })"
                                :fileList="idCardFrontFileList">
                            </CommonUploadImg>

                            <CommonUploadImg :hit="$t('text.Employee.l19')" :limit="1" style="padding-right: 20px;"
                                @returnData="setImgValue3" @delUrl="clearData({ 'idCardBack': '' })"
                                :fileList="idCardBackFileList">
                            </CommonUploadImg>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
    

<script>
import { ElMessage } from 'element-plus'
import { addEmployeesPage1 } from '../../itemList';
import { getEmployDrop, getJobDropdownBoxData, getOrgDropdownBoxData, orgTreeNoUser, insertUser, userUpdate,moneyPlanFindList } from '../../http/api'
import CommonUploadImg from '../../components/input/CommonUploadImg.vue';
import CommonInputKey from '../../components/input/CommonInputKey.vue';
import CommonUploadHead from '../../components/input/CommonUploadHead.vue';
import CommonSelectKey from '../../components/input/CommonSelectKey.vue';
import CommonInputTime from '../../components/input/CommonInputTime.vue';
import RadioSelect from '../../components/select/RadioSelect.vue';
import CommonSelect from '../../components/input/CommonSelect.vue';
export default {
    name: 'AddNeighbourhoods',
    components: {
        CommonUploadImg: CommonUploadImg,
        CommonInputKey: CommonInputKey,
        CommonUploadHead: CommonUploadHead,
        CommonSelectKey: CommonSelectKey,
        RadioSelect: RadioSelect,
        CommonInputTime: CommonInputTime,
        CommonSelect: CommonSelect
    },
    data() {
        return {
            addHousePage: addEmployeesPage1,
            isload: false,
            dropData: [],
            jobSelect: [],
            orgSelect: [],
            orgSelectCopy: [],
            isOrgClear: false,
            orgTreeList: [],
            isShowOrgTree: false,
            params: {},
            isEdit: false,
            loading: false,
            dictConver: ['userSex','moneyPlanId'],
        }
    },
    mounted() {
        //获取下拉框
        getEmployDrop().then(res => {
            if (res !== undefined) {
                this.dropData = res
                //如果编辑
                if (this.$route.query.edit == 'true' && localStorage.getItem("AddEmployees") != null) {
                    this.isEdit = true
                    this.params = JSON.parse(localStorage.getItem("AddEmployees"))
                }
                //获取岗位
                orgTreeNoUser().then(res => {
                    if (res !== undefined) {
                        this.orgTreeList = res
                    }
                }).catch()
                //获取岗位
                getJobDropdownBoxData().then(res => {
                    if (res !== undefined) {
                        this.jobSelect = res
                    }
                })

                getOrgDropdownBoxData().then(res => {
                    if (res !== undefined) {
                        this.orgSelect = res
                    }
                })
                //获取提成方案
                moneyPlanFindList().then(res => {
                    if (res !== undefined) {
                        this.dropData.moneyPlanId= res.map(item=>{
                            return {
                                dictName:item.name,
                                dictValue:item.id
                            }
                        })
                        this.isload = true
                    }
                })
            }
        }).catch()

    },
    methods: {
        //编辑时获取下拉框默认填充值
        getSelectDefault(key,key2) {
            let findContain = this.dictConver.filter(v => v === key2)
            if (findContain.length > 0) {
                //需要进行转换
                let defaultName = this.dropData[key2].filter(v => v.dictValue === this.params[key])
                if (defaultName.length <= 0) return ''
                return defaultName[0].dictName
            } else {
                //不需要转换直接返回
                return this.params[key]
            }
        },
        setDataIds1(item) {
            console.log(item)
            this.params.jobId = item.id
            this.clearData({ orgIds: "", functionalScope: "" })
            this.isOrgClear = !this.isOrgClear
            this.orgSelectCopy = this.orgSelect.filter(v => {
                if (item.level == '5') {
                    if (v.orgLevel === '4') {
                        return v
                    }
                } else {
                    if (v.orgLevel === item.level) {
                        return v
                    }
                }
            })
            if (item.level == '-1') {
                this.isShowOrgTree = true
            } else {
                this.isShowOrgTree = false
            }
        },
        setDataIds2(item) {
            this.params.orgIds = item.orgIds
        },
        setDataIds3(item) {
            this.params.functionalScope = item.functionalScope
        },
        //接收返回值
        setData(obj) {
            console.log(obj)
            this.params = { ...this.params, ...obj }
        },
        setImgValue1(path) {
            if (Array.isArray(path) && path.length > 0)
                this.params.avatar = path[0]
        },
        setImgValue2(path) {
            if (Array.isArray(path) && path.length > 0)
                this.params.idCardFront = path[0]
        },
        setImgValue3(path) {
            if (Array.isArray(path) && path.length > 0)
                this.params.idCardBack = path[0]
        },
        getOrgName(orgId) {
            let temp = this.orgSelect.filter(v => v.orgIds === orgId)
            if (temp.length > 0)
                return temp[0].orgName
            else
                return ''
        },
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.params = Object.keys(this.params).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.params[key];
                }
                return acc;
            }, {});
        },
        //点击保存
        handleClick() {
            let flag = true
            let arr = [1, 2, 3, 4]
            arr.forEach(element => {
                const childRef = this.$refs['child' + element]
                if (childRef && !childRef.inputReturn()) {
                    flag = flag && false
                }
            });
            this.addHousePage.forEach((element, index1) => {
                element.data.forEach((item, index2) => {
                    const childRef = this.$refs['child' + index1 + index2]
                    if (childRef && childRef.length > 0 && !childRef[0].inputReturn()) {
                        flag = flag && false
                    }
                });
            });
            if (flag) {
                this.insert()
            } else {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.Common.l999'),
                    type: 'error',
                })
            }
        },

        //提交上传
        insert() {
            this.loading = true
            if (this.isEdit) {
                userUpdate(this.params).then(res => {
                    this.loading = false
                    if (res !== undefined) {
                        ElMessage.success({
                            showClose: true,
                            message: this.$t('text.Common.l3'),
                            type: 'success',
                        })
                        this.$router.back()
                    }
                })
            } else {
                insertUser(this.params).then(res => {
                    this.loading = false
                    if (res !== undefined) {
                        ElMessage.success({
                            showClose: true,
                            message: this.$t('text.Common.l1'),
                            type: 'success',
                        })
                        this.$router.back()
                    }
                })
            }
        },

    },
    watch: {
    },
    computed: {
        headFileList() {
            if (this.$route.query.edit == 'true') {
                let editData = JSON.parse(localStorage.getItem("AddEmployees"))
                return editData && editData.avatar != null ? [{ url: editData.avatar }] : []
            }else{
                return []
            }
        },
        idCardFrontFileList() {
            if (this.$route.query.edit == 'true') {
                let editData = JSON.parse(localStorage.getItem("AddEmployees"))
                return editData && editData.idCardFront != null ? [{ url: editData.idCardFront }] : []
            }else{
                return []
            }
        },
        idCardBackFileList() {
            if (this.$route.query.edit == 'true') {
                let editData = JSON.parse(localStorage.getItem("AddEmployees"))
                return editData && editData.idCardBack != null ? [{ url: editData.idCardBack }] : []
            }else{
                return []
            }
        },
    }

}
</script>
    
<style scoped>
.addHouse {
    width: 100%;
}

.main {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 710px;
    margin: 0 auto;
}

.df {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid rgb(220, 223, 230);
    padding-bottom: 25px;
}

.title {
    font-size: 12px;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 5px;
    font-weight: 600;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgb(220, 223, 230);
    padding-top: 7px;
    padding-bottom: 7px;
    position: sticky;
    top: 29px;
    background: white;
    z-index: 53;
    box-shadow: 1px 1px 10px 5px #f8f8f8
}

.headTitle {
    font-size: 14px;
    color: #aaa;
    text-align: left;
    padding-top: 20px
}

.must {
    font-size: 12px;
    color: red;
    padding-right: 5px;
}
</style>